<template>
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <!-- 头部左侧内容 -->
        <div>
          <!-- logo图 -->
          <img src="@/assets/heima.png" alt="logio">
          <!-- 头部标题 -->
          <span>后台管理系统</span>
        </div>
        <!-- 头部右侧 -->
        <el-button type="info" @click="logout">退出登录</el-button>
      </el-header>
      <!-- 主体内容 -->
      <el-container>
        <!-- 主体左侧导航 -->
        <el-aside :width="iscollapse ? '64px' : '200px'">
          <!-- 折叠按钮 -->
          <div @click="collMenu" class="toggle-button">| | |</div>
          <!-- 导航菜单 -->
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="iscollapse" :collapse-transition="false" router :default-active="navState">
            <!-- 一级菜单 -->
            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
              <!-- 菜单标题 -->
              <template slot="title">
                <!-- 标题图标 -->
                <i :class="iconsObj[item.id]"></i>
                <!-- 标题文字 -->
                <span>{{item.authName}}</span>
              </template>
              <!-- 菜单内容 二级菜单 -->
              <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.id" @click="saveNavState">
                <!-- 菜单内容图标 -->
                <i class="el-icon-caret-right"></i>
                <!-- 菜单内容的标题 -->
                <span>{{subitem.authName}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主体右侧内容区域 -->
        <el-main>
          <!-- 路由展位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 菜单信息
      menuList: [],
      // 导航菜单图标信息
      iconsObj: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      },
      // 导航是否折叠
      iscollapse: false,
      // 确定导航 动态 焦点
      navState: ''
    }
  },
  methods: {
    // 退出登陆
    logout() {
      // 清除token
      window.sessionStorage.clear()
      // 跳转
      this.$router.push('/login')
    },
    // 获取导航菜单信息
    async getMenuList() {
      // 请求后台，获取信息
      const { data: result } = await this.$http.get('menus')
      // 获取不成功中断执行
      if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
      // 将获取到的信息给到 Vue
      this.menuList = result.data
    },
    // 折叠导航菜单
    collMenu() {
      this.iscollapse = !this.iscollapse
    },
    // 保存导航选中的信息
    saveNavState(e) {
      // 将 path 信息给到本地 session
      this.navState = e.index
      window.sessionStorage.setItem('navState', this.navState)
    }
  },
  // 生命周期函数，创建实例化完成后
  created() {
    // 执行请求函数
    this.getMenuList()
    // 初始化 导航的 活动菜单
    this.navState = window.sessionStorage.getItem('navState')
  }
}
</script>

<style lang="less" scoped>
// 页面大盒子
.home-container {
  height: 100%;
  // 头部样式
  .el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    // 头部左侧样式
    > div {
      font-size: 20px;
      color: #ffffff;
      display: flex;
      align-items: center;
      // 头部文字
      > span {
        padding-left: 15px;
      }
    }
  }
  // 主体导航
  .el-aside {
    background-color: #333744;
    color: #dddddd;
    // 自定义图标右边的间距
    .iconfont {
      margin-right: 10px;
    }
    // 去掉菜单右边的边框
    .el-menu {
      border: none;
    }
    // 折叠按钮
    .toggle-button {
      background-color: #475061;
      font-size: 10px;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }
  // 主体内容
  .el-main {
    background-color: #eaedf1;
  }
}
</style>
